<template>
    <div class="popup_pg">
        <div class="name">推送消息：预计未来12小时仍将有30-50毫米降水，请持续关注天气预警信息，做好防范措施！</div>
        <div class="text">推送时间：2021-07-05 17:35</div>
        <div class="text">接收人：金宝屯煤矿-何田</div>
        <div class="text">开采方式:{{vdata.fs}}</div>
        <div class="text">消息回复：收到，已做好相关应对措施，井下人员逐步撤离出井！</div>
        <div class="text">井下人员曲线：</div>
        <vae-echarts v-if="show" :options="option"  height="200px"  style="height: 200px"></vae-echarts>
    </div>
</template>

<script>
export default {
    name: "popup_pg",
    props:{
      vdata:{}
    },
    watch:{
       vdata: {
          handler(newName, oldName) {
             this.init()
          },
          deeep: true
        }
    },
    data(){
      return{
        levelMap:{
            "01":"重大风险 ",
            "02":"较大风险",
            "03":"一般风险",
            "04":"低分险",
        },
        levelColor:{
          "01":"#db2d2d ",
          "02":"#fc7500",
          "03":"#e3ca21",
          "04":"#00b4ff",
        },
        typeMap:{
            "ts":'态势预警',//态势预警
            "sg":'事故预警',//事故预警
            "zh":'灾害',//灾害
            "ws":'瓦斯预警',//瓦斯预警
            "jd":'瓦斯预警',//瓦斯预警
        },
        option:{},
        show:false,
      }
    },
    mounted(){
      this.init()
    },
    methods:{
     init(){
       this.show=false;
        this.request({
          url: "data/getData/3.34",
          method: "get"
        }).then(({data})=> {
          console.log(data)
           this.show=true;
           this.option={
              xAxis: {
                  type: 'category',
                  data: data.xName
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data:data.personCount,
                  type: 'line'
              }]
          };
           this.option={
          color:colorArr,
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            itemHeight: 16,
            itemWidth: 16,
            data:legend,

            textStyle:{
              color:"#fff"
            }
          },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : true,
              data : data.content[0].xName,
              axisTick: {
                show: true //隐藏X轴刻度
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff"
                }

              },
              axisLabel: {
                  interval:0, //强制显示文字
                  show: true,
                  textStyle: {
                   color: "#ebf8ac" //X轴文字颜色
                  }
              },
            }
          ],
          yAxis : [
            {
              type : 'value',
              nameTextStyle: {
                color: "#ebf8ac"
              },

              axisLine: {
                show:false,
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ebf8ac"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#DDD'
                }
              },
            }
          ],
          series : [
            {
              name:"井下人员曲线",
              type:'line',
              min:10,
              max:40,
              data:data.content[0].personCount,
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbolSize: 0,
              lineStyle: {
                normal: {
                  width: 5,
                  color: {
                    type: 'linear',
                    colorStops: [{
                      offset: 0,
                      color: '#BB00E0' // 0% 处的颜色
                    },
                      {
                        offset: 0.4,
                        color: '#BB00E0' // 100% 处的颜色
                      }, {
                        offset: 1,
                        color: '#BB00E0' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(120,26,133, 0.5)',
                  shadowBlur: 2,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                }
              },
              smooth: true,
            },
          ]
        }


        })
     }
   }
}
</script>

<style  lang="less" scoped>
  .popup_pg{
    font-size: 1.4vh;
    line-height: 2vh;
    .name{ font-size: 1.4vh; }
    .text{ font-size: 1.4vh;color: #40E6FE; }
    .time{color: #84A9FF;font-size: 1vh;}
   
  }
</style>
